<template>
  <div class="detailView">
    <closePanel @closePanelfunc="closePanelfunc" :closetitle=closetitle></closePanel>
    <div class="container">
      <div class="basicinfo">
        <div class="title">
          <p>基本信息</p>
        </div>
        <div class="content">
          <div class="gjInfoBox" >
            <p class="gjName" v-for="(item,index) in qydata" :key="index+'basicinfoName'" v-if="index=='B0010024'"> {{item.value}}</p>
          </div>
          <div class="gjInfoBox" >
            <p class="gjInfo" v-for="(item,index) in qydata" :key="index+'basicinfoList'" v-if="popupDefaultShowInfo.includes(index)&&qydata[index].value!=''">{{item.name}}&nbsp;:&nbsp;&nbsp;{{item.value}}</p>
          </div>
          <div class="checkbox-box">
            <el-checkbox :indeterminate="idenCheckBox.isIndeterminate" v-model="idenCheckBox.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="idenCheckBox.checkedIden" @change="handleCheckedIdenChange">
              <el-checkbox v-for="(item,index) in idenCheckBox.numIden" :label="item.name" :key="index">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>

          <div class="changeEcharts">
            <span class="pos fontClass" @click="initLineChart" title="折线图" >
              <img style="width:18px;height:auto;" src="../../images/line_a.png" alt="折线图" />
            </span>
            <span class="pos fontClass" @click="initBarChart" title="柱状图">
              <img style="width:18px;height:auto;" src="../../images/bar_a.png" alt="柱状图" />
            </span>
          </div>
          <div id="chartbox"></div>
        </div>
      </div>
      <div class="qyintroduction ryglGjRight">
        <div class="title">
          <p>单位信息</p>
        </div>
        <div class="content">
          <ul v-for="(item,index) in qydata" :key="index+'infoList'">
            <li v-if="(qydata[index]).hasOwnProperty('name')&&!popupDefaultShowInfo.includes(index)&&qydata[index].value!=''&&qydata[index].value!='-'">{{(qydata[index]).name}}&nbsp;:&nbsp;&nbsp;{{(qydata[index]).value}}</li>
          </ul>
        </div>
      </div>
      <div class="qyphoto ryglGjRight">
        <!-- <div class="videoBtn">视频监控</div> -->
        <div class="title">
          <p>单位照片</p>
        </div>
        <div class="content">
          <ul  v-if="qydata.hasOwnProperty('info')&&showttjphoneID.includes(qydata.info.ID)">
            <li v-for="(img,index) in imgList.srcListAllTj">
              <el-image style="width: 100px; height: 100px"
              :src="img"
              :preview-src-list="imgList.srcListAllTj">
               </el-image>
            </li>
          </ul>
          <ul  v-else>
             <li v-for="(img,index) in imgList.srcListAll">
              <el-image style="width: 100px; height: 100px"
              :src="img"
              :preview-src-list="imgList.srcListAll">
               </el-image>
            </li>
            <!-- <li>
              <img src="static/images/company.jpg" @click="openDialog('static/images/company.jpg')">
            </li>
            <li>
              <img src="static/images/company.jpg" @click="openDialog('static/images/company.jpg')">
            </li>
            <li>
              <img src="static/images/company.jpg" @click="openDialog('static/images/company.jpg')">
            </li> -->
          </ul>
        </div>
      </div>
      <div class="cpphoto ryglGjRight">
        <div class="title">
          <p>产品照片</p>
        </div>
        <div class="content">
          <ul v-if="qydata.hasOwnProperty('info')&&showttjphoneID.includes(qydata.info.ID)">
             <li v-for="(img,index) in imgList.cpphotoAllTj">
              <el-image style="width: 100px; height: 100px"
              :src="img"
              :preview-src-list="imgList.cpphotoAllTj">
               </el-image>
            </li>
            <!-- <li>
              <img src="static/images/tjj/cp1.jpg" @click="openDialog('static/images/tjj/cp1.jpg')">
            </li>
            <li>
              <img src="static/images/tjj/cp2.jpg" @click="openDialog('static/images/tjj/cp2.jpg')">
            </li>
            <li>
              <img src="static/images/tjj/cp3.jpg" @click="openDialog('static/images/tjj/cp3.jpg')">
            </li> -->
          </ul>
          <ul  v-else>
            <li v-for="(img,index) in imgList.cpphotoAll">
              <el-image style="width: 100px; height: 100px"
              :src="img"
              :preview-src-list="imgList.cpphotoAll">
               </el-image>
            </li>
            <!-- <li>
              <img src="static/images/company.jpg" @click="openDialog('static/images/company.jpg')">
            </li>
            <li>
              <img src="static/images/company.jpg" @click="openDialog('static/images/company.jpg')">
            </li>
            <li>
              <img src="static/images/company.jpg" @click="openDialog('static/images/company.jpg')">
            </li> -->
          </ul>
        </div>
      </div>
    </div>

    <el-dialog title="" :visible.sync="dialog.dialogTableVisible" width="65%" :modal="false" custom-class="detailView_imgSrcDialog">
      <img :src="dialog.imgSrc" alt="">
  </el-dialog>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import closePanel from "./closePanel.vue";
import microConfig from 'static/config/micro.js';
export default {
  name: "detailView",
  props: [],
  components: { closePanel },
  data() {
    return {
        closetitle:"详情",
        qydata:[],
        popupDefaultShowInfo:[],
        idenCheckBox:{
          isIndeterminate:true,
          checkAll:false,
          checkedIden:[],
          numIden:[]
        },
        showttjphoneID:["EE26245D879649CBA7CC8CD609D59F56","76EB5B8D017741FE9C9F0E9629452D6C","4D8F041BD05445C299A03B2E32B1343A","E586B147781444DEB71C5C00F6526562","CE2017A798134E349B8F294F430C1CEA","50C436A41F2C426081036B2E94FC4900","39FDE801095345EFBC3AF7B72055022E","72860B73492240ABB013BF70EB61065F","E4960B3C1ED64B2498FA3259F243A454"],
        dialog:{//图片放大弹窗
          dialogTableVisible:false,
          imgSrc:''
        },
        imgList:{
          srcListAllTj:[
            'static/images/tjj/tjj1.jpg',
            'static/images/tjj/tjj2.jpg',
            'static/images/tjj/tjjn3.jpg'
          ],
          srcListAll: [
            'static/images/company.jpg',
            'static/images/company.jpg',
            'static/images/company.jpg',
          ],
          cpphotoAllTj:[
            'static/images/tjj/cp1.jpg',
            'static/images/tjj/cp2.jpg',
            'static/images/tjj/cp3.jpg',
          ],
          cpphotoAll:[
            'static/images/company.jpg',
            'static/images/company.jpg',
            'static/images/company.jpg'
          ]
        },
        detailChartType:"bar",
        detailChart:null
    };
  },
  mounted() {
    this.popupDefaultShowInfo = microConfig.popupDefaultShowInfo;
    this.qydata = this.detailViewData;
    this.initNumIden();
    
  },
  computed: {
    ...mapState({
      detailViewData:state => state.micro.detailViewData,
      showDetailViewLayer: state => state.micro.showDetailViewLayer
    })
  },
  watch:{
    detailViewData(newVal, oldVal){
      this.qydata = newVal;
      this.initNumIden();
      
    }
  },
  methods: {
    ...mapMutations(["changeDetailViewLayer"]),
    openDialog(imgUrl){
      this.dialog.dialogTableVisible = true;
      this.dialog.imgSrc = imgUrl;
    },
    initNumIden(){
      let that = this;
      let qydata = this.qydata;
      that.idenCheckBox.numIden = [];
      this.idenCheckBox.checkedIden = [];
      for(let i in qydata){
        if(qydata[i].idenType ==2){
          that.idenCheckBox.numIden.push(qydata[i]);
        }
      }
      for(let i in this.idenCheckBox.numIden){
        if(i<1){
          let item = this.idenCheckBox.numIden[i];
          this.idenCheckBox.checkedIden.push(item.name)
        }
      }
      this.initChartData();
    },
    handleCheckAllChange(status) {
      let that = this;
      this.isIndeterminate = false;
      if(status){
        for(let i in that.idenCheckBox.numIden){
          this.idenCheckBox.checkedIden.push(that.idenCheckBox.numIden[i].name)
        }
      }else{
        this.idenCheckBox.checkedIden = [];
      }
      this.initChartData();
    },
    handleCheckedIdenChange(value) {
      let checkedCount = value.length;
      this.idenCheckBox.checkAll = checkedCount === this.idenCheckBox.numIden.length;
      this.idenCheckBox.isIndeterminate = checkedCount > 0 && checkedCount < this.idenCheckBox.numIden.length;
      this.initChartData();
    },
    initChartData(){
      let chartData = {
        dataset:[['数字指标', '数据']]
      }
      for(let i in this.idenCheckBox.numIden){
        let item = this.idenCheckBox.numIden[i];
        if(this.idenCheckBox.checkedIden.includes(item.name)){
          chartData.dataset.push([item.name,item.value])
        }
      }
      this.initChart(chartData);
    },
    initLineChart(){
      this.detailChartType = "line";
      this.initChartData();
    },
    initBarChart(){
      this.detailChartType = "bar";
      this.initChartData();
    },
    initChart(chartData) {
      // 基于准备好的dom，初始化echarts实例
      this.detailChart= echarts.init(document.getElementById("chartbox"));
      let colors = ['#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1','#4150d8','#4a5bdc' ];
      // 指定图表的配置项和数据
      var option = {
        color: colors,
        dataset: {
            // 提供一份数据。
            source:chartData.dataset
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
              type: "shadow",
          }
        },
        // toolbox: {
        //   top: 10,
        //   left: 10,
        //   feature: {
        //     magicType: {
        //       show: true,
        //       type: ["line", "bar"],
        //     }
        //   },
        //   iconStyle:{
        //     color:['rgba(255, 255, 255,1)']
        //   }
        // },
        legend: {
          top: 30,
          right: 0,
          orient: "vertical",
          textStyle: {
            color: "rgba(255,255,255,0.8)"
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: 'rgba(255,255,255,0.8)'
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate:'20  ',
            textStyle: {
                color: "rgba(255,255,255,0.8)" //X轴文字颜色
            }
          },
        },
        yAxis: {
          splitArea: {
            show: true,
            areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
                        color: 'rgba(255,255,255,0.8)'
                        }
          },
          axisLabel: {
              show: true,
              textStyle: {
                  color: "rgba(255,255,255,0.8)"
              }
          }
        },
        series:[{
          type: this.detailChartType,
          label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 20,
                  color: 'rgba(255,255,255,0.9)'
              }
          },
          itemStyle: {
              normal: {
                  color: (params) => {
                      let colors = ['#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1','#4150d8','#4a5bdc',  ]
                      return colors[params.dataIndex]
                  }
              }
          }
      }]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.detailChart.setOption(option);
    },
    closePanelfunc() {
      this.$store.commit("changeDetailViewLayer", false);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../css/rule.scss";
.detailView {
  z-index: 1300;
  width: calc(100vw - 369px);
  height: calc(100vh - 140px);
  margin-left: 310px;
  margin-top: 70px;
  position: absolute;
  .container {
    width: 100%;
    height: calc(100% - 30px);
    border: 1px solid #73ffff;
    background-color: rgba(0, 48, 64, 0.6);
    box-sizing: border-box;
  }
  .basicinfo,
  .qyphoto,
  .cpphoto {
    width: 33%;
    float: left;
    height: 50%;
  }
  .basicinfo {
    height: 100%;
     .el-checkbox__label{
        color: rgba(255,255,255,0.8)
      }
    .checkbox-box{
      bottom: 320px;
      position: absolute;
      padding: 20px;
      box-sizing: border-box;
      .el-checkbox__label{
        color: rgba(255,255,255,0.8)
      }
    }
    .gjName {
      padding-left: 10px;
      color: $fontColorActive2;
      font-size: 24px;
      line-height: 50px;
    }
    .gjInfo {
      padding-left: 10px;
      color: #fff;
      font-size: 17px;
      line-height: 25px;
      margin: 14px 0;
      font-weight: bold;
    }
    .content{
      position: relative;
      height: calc(100% - 30px);
    }
  }
  .ryglGjRight {
    border-radius: 3px;
    background: rgba(0, 48, 64, 0.4);
  }
  .qyintroduction {
    color: #fff;
    font-size: 16px;
    width: 33%;
    float: left;
    height: 100%;
    .content {
      height: calc(100% - 30px);
      padding: 10px;
      overflow: auto;
      box-sizing: border-box;
      ul{
        li{
          color: #ffffff;
          font-size: 14px;
          font-weight: lighter;
          line-height: 25px;
          margin: 14px 0;
          list-style: none;
          word-break : break-all;
        }
      }
    }
  }
  .title {
    height: 30px;
    background: url(../../images/bg16.png) no-repeat left center;
    p {
      float: left;
      line-height: 30px;
      padding-left: 10px;
      color: #92bacd;
      font-size: 14px;
    }
  }
  #chartbox {
    width: 100%;
    height: 320px;
    position: absolute;
    bottom: 0;
  }
  .qyphoto,
  .cpphoto {
    position: relative;
    .videoBtn{
      cursor: pointer;
      position: absolute;
      top: 0px;
      right: 10px;
      margin-left: -42px;
      width: 85px;
      height: 30px;
      line-height: 30px;
      color: #FFFFFF;
      font-size: 14px;
      text-align: center;
      background: url(../../images/bg20.png) no-repeat center;
    }
    ul {
      li {
        list-style: none;
        display: inline-block;
        width: 100px;
        list-style-type: none;
        margin-top: 10px;
        margin-left: 10px;
        float: left;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        img {
          border: solid 2px #fff;
          width: 100px;
          height: 90px;
        }
      }
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" >
@import "../../css/rule.scss";
  .basicinfo {
    height: 100%;
    .checkbox-box{
      bottom: 320px;
      position: absolute;
      padding: 20px;
      box-sizing: border-box;
      .el-checkbox__input.is-checked+.el-checkbox__label {
        color:$fontColorActive2;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #26ffff00;
        border-color: $fontColorActive2;
      }
      .el-checkbox__inner::after{
        border: 2px solid $fontColorActive2;
        border-left: 0;
        border-top: 0;
      }
      .el-checkbox__label{
      }
      .el-checkbox {
        color: rgba(255,255,255,0.8);
      }
    }
  }
  .detailView{
    .detailView_imgSrcDialog{
      margin-left: 360px; 
      .el-dialog__body{
        max-height: 600px;
        overflow: auto;
        img{
          width: auto;
          height: 100%;
          max-width: 100%;
        }
      }
    }
    .ryglGjRight{
      .el-image-viewer__close{
        color: rgba(255,255,255,1);
        i{
          padding: 10px;
          background-color: #107089;
          border-radius: 30px;
        }
      }
      .el-image-viewer__next, .el-image-viewer__prev{
        background-color: #107089;
      }
      .el-image-viewer__actions{
        background-color: #107089;
      }
    }
    .changeEcharts{
      bottom: 270px;
      position: absolute;
      padding: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 1500;
      cursor: pointer;
    }
  }
</style>
